<template>
  <el-row :gutter="12">
    <el-col :span="isRange ? 24 : 12">
      <el-select
        v-model="cloneData.type"
        size="small"
        placeholder="请选择"
        style="width:100%;"
        @change="onTypeChange"
      >
        <el-option
          label="小于"
          value="lt"
        />
        <el-option
          label="小于等于"
          value="lte"
        />
        <el-option
          label="大于"
          value="gt"
        />
        <el-option
          label="大于等于"
          value="gte"
        />
        <el-option
          label="等于"
          value="eq"
        />
        <el-option
          label="介于两数之间"
          value="bet"
        />
      </el-select>
    </el-col>
    <el-col :span="isRange?24:12">
      <el-date-picker
        v-if="!isRange"
        v-model="cloneData.value"
        style="width:100%;"
        type="date"
        value-format="timestamp"
        @change="update"
      />
      <div
        v-else
        style="width:100%;overflow:hidden;margin-top:10px;"
      >
        <el-col
          :span="6"
          style="padding-left:0;"
        >
          <el-date-picker
            v-model="cloneData.value[0]"
            style="width:100%;"
            type="date"
            value-format="timestamp"
            @change="update"
          />
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="cloneData.value[1]"
            size="small"
            placeholder="请选择"
            @change="update"
          >
            <el-option
              label="<"
              value="lt"
            />
            <el-option
              label="≤"
              value="lte"
            />
          </el-select>
        </el-col>
        <el-col
          :span="4"
          class="range-title"
          :title="title"
        >
          {{ title }}
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="cloneData.value[2]"
            size="small"
            placeholder="请选择"
            @change="update"
          >
            <el-option
              label="<"
              value="lt"
            />
            <el-option
              label="≤"
              value="lte"
            />
          </el-select>
        </el-col>
        <el-col
          :span="6"
          style="padding-left:0;"
        >
          <el-date-picker
            v-model="cloneData.value[3]"
            style="width:100%;"
            type="date"
            value-format="timestamp"
            @change="update"
          />
        </el-col>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import RowWrapper from './RowWrapper';
import Vue from 'vue';
import {Col, InputNumber, Row, Select, Option, DatePicker} from "element-ui";
import {cloneJson} from "@/utils";

Vue.use(Row);
Vue.use(Col);
Vue.use(Select);
Vue.use(Option);
Vue.use(DatePicker);
Vue.use(InputNumber);
/**
 * 日期选择
 * @author maolin
 */
export default {
  components: {
    "row-wrapper": RowWrapper
  },
  model: {
    prop: "value",
    event: "update"
  },
  props: {
    /**
     * 默认值
     * @public
     */
    value: {
      type: Object,
      default () {
        return {};
      }
    },
    /**
     * 标题
     * @public
     */
    title: {
      type: String,
      default: ''
    },
    /**
     * 额外配置
     * @public
     */
    extra: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  // props: ["value", "title", "extra"],
  data() {
    let cloneData = JSON.parse(JSON.stringify(this.value || {}));
    if (cloneData.type === 'bet') {
      cloneData.value[0] = cloneData.value[0] ? cloneData.value[0] * 1000 : cloneData.value[0];
      cloneData.value[3] = cloneData.value[3] ? cloneData.value[3] * 1000 : cloneData.value[3];
    } else {
      cloneData.value = cloneData.value ? cloneData.value * 1000 : cloneData.value;
    }
    cloneData = Object.assign({ type: "gt", value: null }, cloneData);

    return {
      cloneData
    };
  },
  computed: {
    isRange() {
      return this.cloneData.type === "bet";
    }
  },
  mounted(){
    this.update();
  },
  methods: {
    /**
     * 类型选择
     * @private
     */
    onTypeChange(newVal) {
      if (newVal === "bet") {
        let timestamp = (new Date()).getTime();
        this.cloneData.value = [timestamp, "lt", "lt",  timestamp + (24 * 3600 * 1000)];
      }
      this.update();
    },
    /**
     * 更新值
     * @private
     */
    update() {
      let value = cloneJson(this.cloneData);
      let format = this.extra && this.extra.valueFormat ? this.extra.valueFormat : 'timestamp';
      if (format === 'timestamp') {
        if (value.type === 'bet') {
          value.value[0] = value.value[0] / 1000;
          value.value[3] = value.value[3] / 1000;
        }else {
          value.value = value.value / 1000;
        }
      }
      this.$emit("update", value);
    }
  }
};
</script>
<style lang="scss" scoped>
// 三点省略 支持单行多行
// Mixin { n:Number } n：省略行数限制
@mixin ellipsis($n: 2) {
  overflow: hidden;
  text-overflow: ellipsis;

  @if ($n > 1) {
    display: -webkit-box;
    -webkit-line-clamp: $n;
    -webkit-box-orient: vertical;
  } @else {
    white-space: nowrap;
  }
}

.cmp-container {
  line-height: 30px;
  padding: 10px;

  >>> .el-input--small .el-input__inner {
    padding-left: 10px;
    padding-right: 15px;
  }

  >>> .el-input-number.is-controls-right .el-input__inner {
    padding-left: 15px;
    padding-right: 0;
    text-align: left;
  }

  >>> .el-input:hover .el-input__inner {
    border-color: #529eff;
  }
}

.label {
  font-size: 12px;
  padding-right: 16px !important;
  @include ellipsis(2);
}

.range-title {
  font-size: 12px;
  text-align: center;
  @include ellipsis(1);
}

.icon-wrapper {
  i {
    cursor: pointer;
    color: #c5c5c5;

    &:hover {
      color: #333;
    }
  }
}
</style>
